import React, { useEffect } from 'react';
import * as echarts from 'echarts/core';
import { ToolboxComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);

export default function Content_two_right() {
  useEffect(() => {
    const chartDom = document.getElementById('content_two_right');
    const myChart = echarts.init(chartDom);

    const option = {
      legend: {
        top: 'bottom',
        left: 'center',
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
          
        },
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [40, 200],
          center: ['50%', '48%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 6,
          },
          data: [
            { value: 40, name: ' 短视频' },
            { value: 38, name: '帖子' },
            { value: 32, name: '上视频' },
            { value: 30, name: '直播' },
            { value: 25, name: '其他' },
            
          ],
        },
      ],
    };

    option && myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  }, []);
  return (
    <div style={{ textAlign: 'center', height: '100%', width: '100%' }}>
      <div
        id="content_two_right"
        style={{ height: '100%', width: '100%' }}
      ></div>
    </div>
  );
}
